<template>
  <div class="echartsBodys">
    <echarts1 title="总数" :total="total" :list="listWithPercentage" ref="echarts"></echarts1>
    <div class="list">
      <div class="listItem cur" @click="getChecked(index)" v-for="(item, index) in listWithPercentage" :key="index">
        <div class="listIteml">
          <div class="dot" :class="{ disabled: !item.checked }"
            :style="'background: linear-gradient(0deg,' + item.color1 + ' 0%, ' + item.color2 + ' 100%);'"></div>
          <span :class="{ disabled: !item.checked }">{{ item.name }}</span>
        </div>
        <div class="num" :class="{ disabled: !item.checked }">
          {{ item.value }}个
        </div>
        <div class="dot1"></div>
        <div class="dot2"></div>
      </div>
    </div>
  </div>
</template>

<script>

import echarts1 from "./components/echarts.vue";
import { getDeviceStatistic } from '@/api/iot/device';
// import {alarmEvent, pumpRoomStatistics} from "@/api/api/waterSupplyOverview.js";
// {
//                     name: '泵房巡检',
//                     color1: 'rgba(0, 133, 255, 1)',
//                     color2: 'rgba(0, 209, 255, 1)',
//                     checked: true,
//                     value: 0
//                 },
export default {
  name: "title",
  data() {
    return {
      list: [],
      total: 0
    }
  },
  computed: {
    listWithPercentage: function () {
      return this.list.map(item => ({
        ...item,
        percentage: ((item.value / this.total) * 100).toFixed(2) + '%'
      }));
    }
  },
  components: { echarts1 },
  mounted() {
    this.getData();
  },
  methods: {
    getChecked(index) {
      this.list[index].checked = !this.list[index].checked
      this.$refs.echarts.drawEcharts()
    },
    async getData() {
      getDeviceStatistic().then((response) => {
        if (response.code == 200) {
          let obj = {
            name: '在线设备',
            color1: 'rgba(0, 133, 255, 1)',
            color2: 'rgba(0, 209, 255, 1)',
            checked: true,
            value: response.data.deviceOnlineCount
          }
          let obj2 = {
            name: '离线设备',
            color1: 'rgba(255,0,0,0.8)',
            color2: 'rgba(255,0,0,0.8)',
            checked: true,
            value: response.data.deviceOfflineCount
          }
          this.list.push(obj)
          this.list.push(obj2)
          this.total = response.data.deviceCount
        }



      });

    },
  },
}
</script>

<style lang="scss" scoped>
.list {
  position: relative;
  width: calc(50% - 20px);
  margin-right: 20px;
  height: calc(100% - 60px);
  //background: url("./assets/jiaobiaobg.png") no-repeat;
  //background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;

  .dot1 {
    width: 4px;
    height: 3px;
    background: #1695CC;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    position: absolute;
    left: 0;
    bottom: -2px;
  }

  .dot2 {
    width: 4px;
    height: 3px;
    background: #1695CC;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    position: absolute;
    right: 0;
    bottom: -2px;
  }

  .listItem {
    font-size: 14px;
    display: flex;
    width: calc(100% - 0px);
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    border-bottom: 2px solid #1b3e7a;
    position: relative;
    height: 40px;


    .listIteml {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      font-size: 13px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #cfd2df;
      margin-left: 0px;
    }

    span {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #B8CCFF;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .dot {
      width: 11px;
      height: 6px;
      margin-right: 10px;
      flex-shrink: 0;
    }

    .dot.disabled {
      background: rgba(#999, 0.8) !important;
    }

    .disabled span,
    span.disabled {
      color: rgba(#999, 0.8) !important;
    }

    .num {
      font-size: 16px;
      font-family: DIN, DIN;
      font-weight: 500;
      color: #FFFFFF;
      margin-right: 10px;
    }
  }
}

.echartsBodys {
  width: 100%;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}
</style>
